<template>
	<view class="container">
		<view class="title">问题描述</view>
		<view class="tui-cells">
			<textarea class="tui-textarea" placeholder="我希望加入XXXX功能，因为XX情况下，会出现XX异常" maxlength="500"
				placeholder-class="phcolor" v-model="message" />
			<view class="textarea-counter">{{ messageNum }}/500</view>
		</view>
		<!-- <tui-list-cell :hover="false"> -->
		<view class="title" style="padding-top: 32rpx;">添加图片</view>
		<view>
			<tui-upload :value="imgvalue" :limit="5" @complete="uploadresult" @remove="remove">
			</tui-upload>
		</view>
		<!-- </tui-list-cell> -->
		<view class="title top64">手机号码</view>
		<input class="tui-input" placeholder-class="phcolor" placeholder="请输入手机号码" v-model="mobile"
			maxlength="20"></input>
		<view class="title top64">联系邮箱</view>
		<input class="tui-input" placeholder-class="phcolor" placeholder="请输入邮箱" v-model="email" maxlength="20"></input>
		<view class="tui-ptop">
			<tui-button type="danger" shadow height="88rpx" shape="circle" @click="submit">提交反馈</tui-button>
		</view>
	</view>
 
</template>

<script>
const form = require("@/components/common/tui-validation/tui-validation.js")
export default {
	computed: {
		messageNum: function () {
			return this.message.length
		}
	},
	onLoad(options) {

	},
	data() {
		return {
			message: "",
			email: "",
			mobile: "",
			imgvalue: [], //初始化图片,
			image: []
		}
	},
	methods: {
		uploadresult: function (e) {
			this.image = e.imgArr;
		},
		remove: function (e) {
			//移除图片
			//console.log(e)
			let index = e.index
		},
		submit() { //isMobile
			let _this = this;
			let rules = [{
				name: "message",
				rule: ["required", "minLength:8", "maxLength:500"],
				msg: ["请输入问题描述", "问题描述必须8个或以上字符", "问题描述不能超过500个字符"]
			}, {
				name: "mobile",
				rule: ["required", "isMobile"],
				msg: ["请输入手机号码", "请输入正确的手机号码"]
			}];
			// , {
			// 	name: "email",
			// 	rule: ["required", "isEmail"],
			// 	msg: ["请输入邮箱", "请输入正确的邮箱"]
			// }
			let formData = {
				message: _this.message,
				mobile: _this.mobile,
				email: _this.email,
				image: _this.image
			}
			let checkRes = form.validation(formData, rules);
			if (!checkRes) {
				_this.$request.post("Feedback.add", formData).then((res) => {
					if (res.status == 411) {
						// 错误 
						console.log(res.msg)
						uni.hideLoading();
						_this.tui.modal('提示', res.msg, false, function (e) {
							// console.log(e)
						})

						return;
					}
					_this.tui.toast('提交成功');
					_this.message = "";
					_this.email = "";
					_this.mobile = "";
					_this.image = [];
					_this.imgvalue = [];
					uni.navigateBack()
				}).catch((res) => { })
			} else {
				_this.tui.toast(checkRes)
			}
		}
	}
}
</script>

<style>
page {
	background: #fff;
}

.container {
	background-color: #fff;
	margin-top: 22rpx;
	padding: 30rpx;
	box-sizing: border-box;
	padding-bottom: 162rpx
}

.title {
	font-size: 30rpx;
	color: #666;
	padding-bottom: 32rpx;
}

.tui-cells {
	border: 1rpx solid #e6e6e6;
	border-radius: 4rpx;
	height: 280rpx;
	box-sizing: border-box;
	padding: 20rpx 20rpx 0 20rpx;
}

.tui-textarea {
	height: 210rpx;
	width: 100%;
	color: #666;
	font-size: 28rpx;
}

.pholder {
	color: #ccc;
}

.textarea-counter {
	font-size: 24rpx;
	color: #999;
	text-align: right;
	height: 40rpx;
	line-height: 40rpx;
	padding-top: 4rpx;
}

.top64 {
	margin-top: 64rpx;
}

.tui-input {
	font-size: 30rpx;
	height: 88rpx;
	border: 1rpx solid #e6e6e6;
	border-radius: 4rpx;
	padding: 0 25rpx;
	box-sizing: border-box;
}

.tui-ptop {
	padding-top: 80rpx;
}
</style>
